<template>
  <div>
    <div class="header">
      <div class="chaxun">
        <p>查询</p>
      </div>
      <div>
        <div class="shousuo">
          搜索：<input
            type="text"
            placeholder="输入菜品名称进行搜索"
            @blur="fun(value3)"
            v-model="value3"
          />
        </div>
        <br />
        <div class="block">
          <span>时间:</span>
          <el-date-picker
            v-model="value1"
            type="date"
            placeholder="选择日期"
            size="mini"
          >
          </el-date-picker>
          <span class="demonstration">至:</span>
          <el-date-picker
            v-model="value1"
            type="date"
            placeholder="选择日期"
            size="mini"
          >
          </el-date-picker>
          <span class="leibie">菜品类别</span>
          <el-select
            v-model="value"
            placeholder="请选择"
            size="mini"
            @change="add()"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>
    </div>
    <div class="neirong">
      <div class="shuju"><p>数据查询</p></div>
      <el-table :data="tableData" size="mini" border>
        <el-table-column prop="" label="序号" width="170">
        </el-table-column>
        <el-table-column prop="foodName" label="菜品名称" width="190">
        </el-table-column>
        <el-table-column prop="foodDate" label="菜品时间" width="190">
        </el-table-column>
        <el-table-column prop="sortName" label="菜品类别" width="180">
        </el-table-column>
        <el-table-column prop="foodMoney" label="单价" width="180">
        </el-table-column>
        <el-table-column prop="foodNum" label="销售量" width="187">
        </el-table-column>
        <el-table-column prop="jine" label="金额" width="180">
        </el-table-column>
      </el-table>
      <div class="fenye">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[10, 20, 50]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { quanbucaipin, chaxuncaiping } from "@/apis/liwei/CpXs.js";
export default {
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    fun() {
      chaxuncaiping(this.value3).then((ok) => {
        console.log(ok);
      
        this.tableData = ok.data.data.records
       
       
;
      });
    },
    add() {
      console.log(this.value);
    },
  },
  data() {
    return {
      value3: "",
      options: [
        {
          value: "炒菜",
        },
        {
          value: "凉菜",
        },
      ],
      value: "",
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      value1: "",
      value2: "",
      tableData: [],
      total: 0,

      currentPage4: 10,
    };
  },
  mounted() {
    quanbucaipin().then((ok) => {
      console.log(ok);
      this.tableData = ok.data.data;
      console.log(this.tableData);
      
      this.total = ok.data.data.length;
    });
  },
 
};
</script>

<style scoped>
.header {
  height: 165px;

  border: 1px solid rgb(220, 220, 220);
}

.chaxun {
  width: 100%;
  height: 45px;
  background-color: rgb(200, 200, 200);
  line-height: 45px;
}
input {
  width: 200px;
  text-align: center;
}
p {
  margin-left: 20px;
}
.shousuo {
  margin-left: 20px;
  margin-top: 20px;
}
.block {
  margin-left: 20px;
}
.block > span {
  margin-right: 10px;
}
.demonstration {
  margin-left: 10px;
}
.leibie {
  margin-left: 10px;
}
.neirong {
  margin-top: 10px;
}
.shuju {
  height: 45px;
  background-color: rgb(200, 200, 200);
  border: 1px solid rgb(220, 220, 220);
  line-height: 45px;
}

.fenye {
  margin-top: 20px;
}
.el-table {
  margin-top: 10px;
}
.el-pagination {
  margin-left: 260px;
}
</style>